<template>
  <div class="monitoring-panel">
    <h2>数据采集面板</h2>

    <!-- 主机列表 -->
    <div class="host-list-vertical">
      <div v-for="(host, index) in hosts" :key="index" class="host-row">
        <div class="host-info">
          <span class="host-name">{{ host.name }}</span>
          <span :class="['status', statusClass(host.status)]">{{ host.status }}</span>
        </div>
        <div class="host-metrics">
          <span>CPU 使用率: {{ host.cpuUsage }}%</span>
          <span>内存使用率: {{ host.memoryUsage }}%</span>
          <span>磁盘使用率: {{ host.diskUsage }}%</span>
          <span>网络流量: {{ host.networkUsage }} Mbps</span>
        </div>
      </div>
    </div>

    <!-- 主机详情弹窗 -->
    <div v-if="selectedHost" class="host-details">
      <h3>详细监控信息 - {{ selectedHost.name }}</h3>
      <p>IP 地址: {{ selectedHost.ipAddress }}</p>
      <p>状态: <span :class="['status', statusClass(selectedHost.status)]">{{ selectedHost.status }}</span></p>
      <p>CPU 使用率: <strong>{{ selectedHost.cpuUsage }}%</strong></p>
      <p>内存使用率: <strong>{{ selectedHost.memoryUsage }}%</strong></p>
      <p>磁盘使用率: <strong>{{ selectedHost.diskUsage }}%</strong></p>
      <p>网络流量: <strong>{{ selectedHost.networkUsage }} Mbps</strong></p>
      <button @click="closeDetails">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "MonitoringPanel",
  data() {
    return {
      // 模拟主机数据
      hosts: this.generateInitialHosts(),
      selectedHost: null,
      refreshInterval: null
    };
  },
  mounted() {
    // 每5秒刷新一次数据
    this.refreshInterval = setInterval(() => {
      this.hosts = this.generateUpdatedHosts(this.hosts);
    }, 5000);
  },
  beforeUnmount() {
    clearInterval(this.refreshInterval);
  },
  methods: {
    // 生成初始主机数据
    generateInitialHosts() {
      const statuses = ['正常', '警告', '严重'];
      const hosts = [];

      for (let i = 1; i <= 8; i++) {
        const randomStatus = statuses[Math.floor(Math.random() * statuses.length)];
        const cpuUsage = Math.floor(Math.random() * 100);
        const memoryUsage = Math.floor(Math.random() * 100);
        const diskUsage = Math.floor(Math.random() * 100);
        const networkUsage = Math.floor(Math.random() * 200);

        hosts.push({
          id: i,
          name: `Server-${i}`,
          ipAddress: `192.168.1.${100 + i}`,
          status: randomStatus,
          cpuUsage: cpuUsage,
          memoryUsage: memoryUsage,
          diskUsage: diskUsage,
          networkUsage: networkUsage
        });
      }

      return hosts;
    },

    // 随机更新主机数据
    generateUpdatedHosts(oldHosts) {
      return oldHosts.map(host => ({
        ...host,
        status: ['正常', '警告', '严重'][Math.floor(Math.random() * 3)],
        cpuUsage: Math.floor(Math.random() * 100),
        memoryUsage: Math.floor(Math.random() * 100),
        diskUsage: Math.floor(Math.random() * 100),
        networkUsage: Math.floor(Math.random() * 200)
      }));
    },

    // 根据状态返回类名
    statusClass(status) {
      return {
        'status-normal': status === '正常',
        'status-warning': status === '警告',
        'status-critical': status === '严重'
      };
    },

    // 查看主机详情
    showHostDetails(host) {
      this.selectedHost = host;
    },

    // 关闭详情页
    closeDetails() {
      this.selectedHost = null;
    }
  }
};
</script>

<style scoped>
.monitoring-panel {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #0f1a2c;
  color: #ffffff;
}

.host-list-vertical {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.host-row {
  background-color: #1e2b3c;
  border-radius: 8px;
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.host-row:hover {
  background-color: #29374d;
}

.host-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.host-name {
  font-size: 18px;
  font-weight: bold;
}

.status {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status-normal {
  background-color: green;
}

.status-warning {
  background-color: orange;
}

.status-critical {
  background-color: red;
}

.host-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  font-size: 14px;
  color: #ccc;
}

.host-metrics span {
  white-space: nowrap;
}

.host-details {
  margin-top: 20px;
  padding: 20px;
  background-color: #29374d;
  border-left: 4px solid #ffeb3b;
  border-radius: 6px;
}

.host-details h3 {
  color: #ffffff;
}

.host-details .status {
  font-weight: bold;
}

.host-details button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.host-details button:hover {
  background-color: #45a049;
}
</style>